<template>
  <div class="payment_center_list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex"
          justify="start"
          class="search-item-left">
          <Col class="search-item">
            <span class="search-label">服务商类型:</span>
            <Select v-model="serviceType"
              @on-change="search">
              <Option v-for="item in serviceSelectTypeLists"
                :value="item.value"
                :key="item.value">
                {{ item.label }}
              </Option>
            </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">服务商名称:</span>
            <Select v-model="serviceName"
              @on-change="search">
              <Option v-for="item in serviceSelectNames"
                :value="item.value"
                :key="item.value">
                {{ item.label }}
              </Option>
            </Select>
          </Col>
          <Col class="search-item">
            <Button class="search-btn"
              type="primary"
              @click="search">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn"
              @click="reset">重置</Button>
          </Col>
        </Row>
        <Row type="flex"
          justify="end"
          class="search-item-right">
          <Col class="search-item">
            <Button class="search-btn"
              type="primary"
              v-if="hasPermission('moms:pay:providercreate')"
              @click="skipAdd">新增</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe
      :height="this.tableHeight"
      class="table-list"
      :loading="loading"
      :columns="columns"
      :data="data">
      <template slot-scope="{ row, index }"
        slot="providerType">
        <span>{{ getName(row.providerType) }}</span>
      </template>
      <template slot-scope="{ row, index }"
        slot="action">
        <i class="iconsys iconedit"
          title="编辑"
          v-if="hasPermission('moms:pay:providerupdate')"
          @click="skipEdit(row)"></i>
        <Poptip confirm
          title="你确定要删除吗？"
          @on-ok="ok(row)"
          v-if="hasPermission('moms:pay:providerdelete')"
          style="text-align:left">
          <i class="iconsys icondel"
            title="删除"></i>
        </Poptip>
      </template>
    </Table>
    <Row type="flex">
      <Col span="12"
        class="module-menu-nav">
      </Col>
      <Col span="12">
        <div class="page-box">
          <Page :total="total"
            :page-size="pageSize"
            :current="pageIndex"
            show-total
            show-sizer
            @on-change="changePageIndex"
            @on-page-size-change="changePageSize" />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import serviceMixins from '../mixins/serviceType'
import { getServiceLists, deleteService, updateServiceVerify } from '@/api/pay/service.js'
export default {
  name: 'payment_service_list',
  mixins: [serviceMixins],
  data () {
    return {
      tableHeight: 0,
      serviceType: '-1',
      serviceName: '-1',
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns: [
        {
          title: '服务商编号',
          key: 'providerId'
        },
        {
          title: '服务商名称',
          key: 'providerName'
        },
        {
          title: '服务商类型',
          slot: 'providerType'
        },
        {
          title: '修改时间',
          key: 'updatedAt'
        },
        {
          title: '创建时间',
          key: 'createdAt'
        },
        {
          title: '备注',
          key: 'remark',
          width: 220
        }
      ]
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'payment_service_list') {
        this.search()
      }
    }
  },
  mounted () {
    this.getData()
    if (this.hasPermission(['moms:pay:providerupdate', 'moms:pay:providerdelete'])) {
      this.columns.push({
        title: '操作',
        width: 150,
        slot: 'action'
      })
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  methods: {
    search () {
      this.pageIndex = 1
      this.getData()
    },
    reset () {
      this.serviceName = '-1'
      this.serviceType = '-1'
      this.search()
    },
    changePageIndex (page) {
      this.pageIndex = page
      this.getData()
    },
    changePageSize (size) {
      this.pageSize = size
      this.search()
    },
    getData () {
      const params = {
        providerName: this.serviceName === '-1' ? '' : this.serviceName,
        providerType: +this.serviceType,
        merchantId: this.merchantId,
        offset: (this.pageIndex - 1) * this.pageSize,
        limit: this.pageSize,
        deleted: 0
      }
      this.loading = true
      this.tableHeight = 0
      getServiceLists(params).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.data = result.data || []
          this.total = result.totalCount || 0
          if (this.data.length > 10) {
            this.tableHeight = 520
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
        this.loading = false
      })
    },
    getName (value) {
      const result = this.serviceTypeLists.filter(item => item.value === value + '')
      return result[0].label
    },
    skipAdd () {
      this.$router.push({ name: 'payment_service_create' })
    },
    skipEdit (row) {
      updateServiceVerify({
        merchantId: this.merchantId,
        paymentProviderId: row.paymentProviderId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.$router.push({ name: 'payment_service_edit', params: { id: row.paymentProviderId } })
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    ok (row) {
      deleteService({
        merchantId: this.merchantId,
        paymentProviderId: row.paymentProviderId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.$Message.success('删除成功！')
          this.getData()
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>

<style lang="less">
.payment_center_list {
  .search-box {
    .search-item-left {
      width: 70%;
    }
    .search-item-right {
      width: 30%;
    }
  }
  .ivu-table-tip {
    span {
      position: absolute;
      width: 100px;
      left: 50%;
      margin-left: -50px;
    }
  }
}
</style>
